<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      h1,
      h2,
      h3,
      ul,
      li,
      p {
        margin: 0;
        padding: 0;
      }

      body {
        font: 12px Arial, Helvetica, sans-serif;
      }

      a {
        text-decoration: none;
        color: #000;
        outline: none;
      }

      ul {
        list-style-type: none;
      }

      input {
        outline: none;
        border: none;
      }

      img {
        vertical-align: top;
      }

      i {
        font-style: normal;
      }

      .wrapper_01 {
        width: 1100px;
        margin: 0 auto;
      }

      .wrapper_02 {
        width: 980px;
        margin: 0 auto;
      }

      .wrapper_03 {
        width: 982px;
        margin: 0 auto;
      }

      .topbar_sprite {
        display: inline-block;
        background-image: url("./images/topbar.png");
      }

      .topbar_icon_hot {
        width: 28px;
        height: 19px;
        background-position: -190px 0;
      }

      .btn_sprite {
        display: inline-block;
        background: url("./images/button2.png") no-repeat;
        height: 31px;
        line-height: 31px;
        text-align: center;
      }

      .btn_type_01_sup {
        background-position: right -100px;
        padding-right: 5px;
      }

      .btn_type_01_sub {
        display: block;
        background-position: 0 -59px;
        padding-left: 3px;
      }

      .btn_type_01_sub > i {
        display: block;
        background-position: 0 -59px;
        background: url("./images/button2.png") no-repeat;
        padding-left: 3px;
        height: 31px;
      }

      .btn_type_favor_sup {
        padding-right: 5px;
        background-position: right -1020px;
      }

      .btn_type_favor_sub {
        display: inline-block;
        padding-left: 28px;
        padding-right: 3px;
        background-position: 0 -977px;
      }

      .iconall_sprite {
        display: inline-block;
        background-image: url("./images/icon.png");
      }

      .iconall_sprite_radio {
        background-position: -31px -658px;
        width: 35px;
        height: 15px;
      }

      .header_type_01 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 5px;
        font-size: 12px;
      }

      .header_type_01 .title {
        color: #333;
        font-size: 12px;
      }

      .header_type_01 .more {
        color: #666;
      }

      .header_type_01 .more:hover {
        text-decoration: underline;
      }

      .header_type_02 {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        height: 35px;
        box-sizing: border-box;
        padding-left: 34px;
        padding-right: 20px;
        padding-bottom: 5px;
        border-bottom: 2px solid #c10d0c;
        background: url("./images/index.png") no-repeat -225px -156px;
      }

      .header_type_02::after {
        position: absolute;
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        right: 5px;
        bottom: 8px;
        background: url("./images/index.png") no-repeat 0 -240px;
      }

      .header_type_02 .left_area {
        display: flex;
        align-items: center;
      }

      .header_type_02 .title {
        font-size: 20px;
        font-weight: normal;
        color: #333;
      }

      .header_type_02 .keywords {
        display: flex;
        margin-left: 20px;
        color: #999;
      }

      .header_type_02 .keywords .item {
        color: #666;
      }

      .header_type_02 .keywords .line {
        margin: 0 12px;
      }

      .header_type_02 .more {
        font-size: 12px;
        color: #333;
      }

      .header_type_02 .more:hover {
        text-decoration: underline;
      }

      .main > .area {
        display: flex;
        border: 1px solid #d3d3d3;
        border-width: 0 1px;
        background-image: url("./images/wrap1.png");
      }

      .main .area-left {
        width: 729px;
        padding: 20px 20px 40px;
      }

      .recommend-section .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 20px 5px;
      }

      .recommend-section .list .coverall {
        background-image: url("./images/coverall.png");
        background-repeat: no-repeat;
      }

      .recommend-section .list .iconall {
        background-image: url("./images/iconall.png");
        background-repeat: no-repeat;
      }

      .recommend-section .list .item {
        width: 140px;
        margin-bottom: 30px;
      }

      .recommend-section .list .item .top {
        background-color: red;
        position: relative;
      }

      .recommend-section .list .item .top .cover {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-position: 0 0;
      }

      .recommend-section .list .item .top .info {
        color: #fff;
        position: absolute;
        padding-left: 10px;
        left: 0;
        right: 0;
        bottom: 0;
        height: 27px;
        line-height: 27px;
        font-size: 12px;
        background-position: 0 -537px;
      }

      .recommend-section .list .item .top .info .icon-music {
        display: inline-block;
        position: relative;
        top: 1px;
        width: 14px;
        height: 11px;
        background-position: 0 -24px;
      }

      .recommend-section .list .item .top .info .count {
        margin-left: 4px;
      }

      .recommend-section .list .item .top .info .icon-play {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 10px;
        margin: auto 0;
        width: 16px;
        height: 17px;
        background-position: 0 0;
      }

      .recommend-section .list .item .bottom {
        display: block;
        font-size: 14px;
      }

      .recommend-section .list .item .bottom:hover {
        text-decoration: underline;
      }

      .recommend-section .list .item .bottom .icon-radio {
        position: relative;
        top: 2px;
      }

      .disc-section .content {
        height: 186px;
        margin: 20px 0;
        border: 1px solid #d3d3d3;
        box-sizing: border-box;
      }

      .disc-section .content .inner {
        position: relative;
        height: 100%;
        padding: 0 25px;
        box-sizing: border-box;
        border: 1px solid #fff;
        background-color: #f5f5f5;
      }

      .disc-section .inner .roller {
        display: flex;
        height: 100%;
        overflow: hidden;
      }

      .disc-section .inner .roller .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-top: 10px;
        flex-shrink: 0;
      }

      .disc-section .roller .list .item {
        width: 118px;
        height: 150px;
        background: url("./images/index.png") no-repeat -260px 100px;
      }

      .disc-section .roller .list .item .album {
        position: relative;
      }

      .disc-section .roller .list .item .cover {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: url("./images/coverall.png") 0 -570px;
      }

      .disc-section .roller .item .album .play {
        display: none;
        position: absolute;
        right: 10px;
        bottom: 5px;
        width: 22px;
        height: 22px;
        background: url("./images/iconall.png") no-repeat 0 -85px;
      }

      .disc-section .roller .item .album:hover .play {
        display: block;
      }

      .disc-section .roller .list .item a {
        display: block;
        margin-top: 5px;
        padding-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .disc-section .roller .list .item a:hover {
        text-decoration: underline;
      }

      .disc-section .roller .list .item a.title {
        color: #000;
        margin-top: 8px;
      }

      .disc-section .roller .list .item a.anchor {
        color: #666;
      }

      .disc-section .inner .control {
        position: absolute;
        width: 17px;
        height: 17px;
        top: 72px;
        bottom: 0;
        background-image: url("./images/index.png");
      }

      .disc-section .inner .control-left {
        left: 5px;
        background-position: -260px -75px;
      }

      .disc-section .inner .control-right {
        right: 5px;
        background-position: -320px -75px;
      }

      .main .area-right {
        width: 250px;
      }

      .main .area-right .user-login {
        width: 250px;
        height: 126px;
        background: url("./images/index.png") 0 0;
      }

      .main .area-right .user-login .desc {
        width: 205px;
        margin: 0 auto;
        padding-top: 16px;
        color: #666;
        font-size: 12px;
        line-height: 22px;
      }

      .main .area-right .user-login .btn {
        display: block;
        margin: 15px auto 0;
        width: 100px;
        height: 31px;
        line-height: 31px;
        color: #fff;
        text-align: center;
        font-size: 12px;
        background: url("./images/index.png") 0 -195px;
        text-shadow: 0 1px 0 #8a060b;
      }

      .main .settle-singer {
        padding: 20px;
      }

      .main .settle-singer .list {
        padding: 5px 0;
      }

      .main .settle-singer .list .item {
        display: flex;
        width: 210px;
        height: 62px;
        margin-bottom: 15px;
        background-color: #fafafa;
      }

      .main .settle-singer .item .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 3px 12px;
        justify-content: space-around;
        border: 1px solid #e9e9e9;
        border-left: none;
        overflow: hidden;
      }

      .main .settle-singer .item .info .singer {
        font-size: 14px;
        font-weight: 700;
        color: #000;
      }

      .main .settle-singer .item .info .desc {
        font-size: 12px;
        color: #666;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .main .hot-anchor {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="area wrapper_02">
        <div class="area-left">
          <div class="recommend-section">
            <div class="header_type_02">
              <div class="left_area">
                <h2 class="title">热门推荐</h2>
                <ul class="keywords">
                  <li><a class="item" href="#">华语</a></li>
                  <li class="line">|</li>
                  <li><a class="item" href="#">流行</a></li>
                  <li class="line">|</li>
                  <li><a class="item" href="#">摇滚</a></li>
                  <li class="line">|</li>
                  <li><a class="item" href="#">民谣</a></li>
                  <li class="line">|</li>
                  <li><a class="item" href="#">电子</a></li>
                </ul>
              </div>
              <div class="right_area">
                <a class="more" href="#">更多</a>
              </div>
            </div>
            <div class="list">
              <div class="item">
                <div class="top">
                  <img src="./images/109951166884472394.jpg" alt="" />
                  <a class="cover coverall" href="#"></a>
                  <div class="info coverall">
                    <i class="icon-music iconall"></i>
                    <span class="count">62万</span>
                    <i class="icon-play iconall"></i>
                  </div>
                </div>
                <a class="bottom" href="#">短视频变装神曲【舞曲 卡点 慢摇】</a>
              </div>
              <div class="item">
                <div class="top">
                  <img src="./images/109951166884472394.jpg" alt="" />
                  <a class="cover coverall" href="#"></a>
                  <div class="info coverall">
                    <i class="icon-music iconall"></i>
                    <span class="count">62万</span>
                    <i class="icon-play iconall"></i>
                  </div>
                </div>
                <a class="bottom" href="#">短视频变装神曲【舞曲 卡点 慢摇】</a>
              </div>
              <div class="item">
                <div class="top">
                  <img src="./images/109951166884472394.jpg" alt="" />
                  <a class="cover coverall" href="#"></a>
                  <div class="info coverall">
                    <i class="icon-music iconall"></i>
                    <span class="count">62万</span>
                    <i class="icon-play iconall"></i>
                  </div>
                </div>
                <a class="bottom" href="#">短视频变装神曲【舞曲 卡点 慢摇】</a>
              </div>
              <div class="item">
                <div class="top">
                  <img src="./images/109951166884472394.jpg" alt="" />
                  <a class="cover coverall" href="#"></a>
                  <div class="info coverall">
                    <i class="icon-music iconall"></i>
                    <span class="count">62万</span>
                    <i class="icon-play iconall"></i>
                  </div>
                </div>
                <a class="bottom" href="#">
                  <i class="iconall_sprite iconall_sprite_radio icon-radio"></i>
                  短视频变装神曲【舞曲 卡点 慢摇】</a
                >
              </div>
              <div class="item">
                <div class="top">
                  <img src="./images/109951166884472394.jpg" alt="" />
                  <a class="cover coverall" href="#"></a>
                  <div class="info coverall">
                    <i class="icon-music iconall"></i>
                    <span class="count">62万</span>
                    <i class="icon-play iconall"></i>
                  </div>
                </div>
                <a class="bottom" href="#">短视频变装神曲【舞曲 卡点 慢摇】</a>
              </div>
              <div class="item">
                <div class="top">
                  <img src="./images/109951166884472394.jpg" alt="" />
                  <a class="cover coverall" href="#"></a>
                  <div class="info coverall">
                    <i class="icon-music iconall"></i>
                    <span class="count">62万</span>
                    <i class="icon-play iconall"></i>
                  </div>
                </div>
                <a class="bottom" href="#">短视频变装神曲【舞曲 卡点 慢摇】</a>
              </div>
              <div class="item">
                <div class="top">
                  <img src="./images/109951166884472394.jpg" alt="" />
                  <a class="cover coverall" href="#"></a>
                  <div class="info coverall">
                    <i class="icon-music iconall"></i>
                    <span class="count">62万</span>
                    <i class="icon-play iconall"></i>
                  </div>
                </div>
                <a class="bottom" href="#">
                  <i class="iconall_sprite iconall_sprite_radio icon-radio"></i>
                  短视频变装神曲【舞曲 卡点 慢摇】</a
                >
              </div>
              <div class="item">
                <div class="top">
                  <img src="./images/109951166884472394.jpg" alt="" />
                  <a class="cover coverall" href="#"></a>
                  <div class="info coverall">
                    <i class="icon-music iconall"></i>
                    <span class="count">62万</span>
                    <i class="icon-play iconall"></i>
                  </div>
                </div>
                <a class="bottom" href="#">短视频变装神曲【舞曲 卡点 慢摇】</a>
              </div>
            </div>
          </div>
          <div class="disc-section">
            <div class="header_type_02">
              <div class="area_left">
                <h2 class="title">新碟上架</h2>
              </div>
              <div class="area_right">
                <a href="#" class="more">更多</a>
              </div>
            </div>
            <div class="content">
              <div class="inner">
                <div class="roller">
                  <ul class="list">
                    <li class="item">
                      <div class="album">
                        <img src="./images/109951167316379898.jpg" alt="" />
                        <a href="#" class="cover"></a>
                        <a href="#" class="play"></a>
                      </div>
                      <a href="#" class="title">
                        NonfictionNonfictionNonfictionNonfiction
                      </a>
                      <a href="#" class="anchor"
                        >88rising88rising88rising88rising</a
                      >
                    </li>
                    <li class="item">
                      <div class="album">
                        <img src="./images/109951167316379898.jpg" alt="" />
                        <a href="#" class="cover"></a>
                        <a href="#" class="play"></a>
                      </div>
                      <a href="#" class="title">
                        NonfictionNonfictionNonfictionNonfiction
                      </a>
                      <a href="#" class="anchor"
                        >88rising88rising88rising88rising</a
                      >
                    </li>
                    <li class="item">
                      <div class="album">
                        <img src="./images/109951167316379898.jpg" alt="" />
                        <a href="#" class="cover"></a>
                        <a href="#" class="play"></a>
                      </div>
                      <a href="#" class="title">
                        NonfictionNonfictionNonfictionNonfiction
                      </a>
                      <a href="#" class="anchor"
                        >88rising88rising88rising88rising</a
                      >
                    </li>
                    <li class="item">
                      <div class="album">
                        <img src="./images/109951167316379898.jpg" alt="" />
                        <a href="#" class="cover"></a>
                        <a href="#" class="play"></a>
                      </div>
                      <a href="#" class="title">
                        NonfictionNonfictionNonfictionNonfiction
                      </a>
                      <a href="#" class="anchor"
                        >88rising88rising88rising88rising</a
                      >
                    </li>
                    <li class="item">
                      <div class="album">
                        <img src="./images/109951167316379898.jpg" alt="" />
                        <a href="#" class="cover"></a>
                        <a href="#" class="play"></a>
                      </div>
                      <a href="#" class="title">
                        NonfictionNonfictionNonfictionNonfiction
                      </a>
                      <a href="#" class="anchor"
                        >88rising88rising88rising88rising</a
                      >
                    </li>
                  </ul>
                  <ul class="list">
                    1
                  </ul>
                </div>
                <a href="#" class="control control-left"></a>
                <a href="#" class="control control-right"></a>
              </div>
            </div>
          </div>
          <div class="rank-section">
            <div class="header_type_02">
              <div class="area_left">
                <h2 class="title">榜单</h2>
              </div>
              <div class="area_right">
                <a href="#" class="more">更多</a>
              </div>
            </div>
          </div>
        </div>
        <div class="area-right">
          <div class="user-login">
            <p class="desc">
              登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
            </p>
            <a href="#" class="btn">用户登录</a>
          </div>
          <div class="settle-singer">
            <div class="header_type_01">
              <h3 class="title">入驻歌手</h3>
              <a href="#" class="more">查看全部&gt;</a>
            </div>
            <ul class="list">
              <li>
                <a href="#" class="item">
                  <div class="album">
                    <img src="./images/109951165588539704.jpg" alt="" />
                  </div>
                  <div class="info">
                    <div class="singer">张惠妹aMEI</div>
                    <div class="desc">
                      台湾歌手张惠妹台湾歌手张惠妹台湾歌手张惠妹
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" class="item">
                  <div class="album">
                    <img src="./images/109951165588539704.jpg" alt="" />
                  </div>
                  <div class="info">
                    <div class="singer">张惠妹aMEI</div>
                    <div class="desc">台湾歌手张惠妹</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" class="item">
                  <div class="album">
                    <img src="./images/109951165588539704.jpg" alt="" />
                  </div>
                  <div class="info">
                    <div class="singer">张惠妹aMEI</div>
                    <div class="desc">台湾歌手张惠妹</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" class="item">
                  <div class="album">
                    <img src="./images/109951165588539704.jpg" alt="" />
                  </div>
                  <div class="info">
                    <div class="singer">张惠妹aMEI</div>
                    <div class="desc">台湾歌手张惠妹</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#" class="item">
                  <div class="album">
                    <img src="./images/109951165588539704.jpg" alt="" />
                  </div>
                  <div class="info">
                    <div class="singer">张惠妹aMEI</div>
                    <div class="desc">台湾歌手张惠妹</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <div class="hot-anchor">
            <div class="header_type_01">
              <h3 class="title">热门主播</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>